﻿@using Covenant.Models.Listeners
@model Listener
@{
    Layout = "_ListenerLayout";
    ViewData["Title"] = "HTTP Listener";
    IEnumerable<Profile> Profiles = ViewBag.Profiles;
    IEnumerable<ListenerType> ListenerTypes = ViewBag.ListenerTypes;
}

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
    <h1 class="h2">Create Listener</h1>
</div>

<ul class="nav nav-tabs mb-3" id="listener-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="http-tab" data-toggle="tab" href="#http" role="tab" aria-controls="http" aria-selected="true">
            <span data-feather="cloud"></span>
            HttpListener
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="bridge-tab" data-toggle="tab" href="#bridge" role="tab" aria-controls="bridge" aria-selected="false">
            <span data-feather="radio"></span>
            BridgeListener
        </a>
    </li>
</ul>

<div class="tab-content" id="listener-tab-content">
    <div class="tab-pane fade" id="http" role="tabpanel" aria-labelledby="http-tab">
        @{
            await Html.RenderPartialAsync("_CreateHttpListener", new HttpListener());
        }
    </div>
    <div class="tab-pane fade" id="bridge" role="tabpanel" aria-labelledby="bridge-tab">
        @{
            await Html.RenderPartialAsync("_CreateBridgeListener", new BridgeListener());
        }
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            var addAddress = function () {
                var num = $(".address-row").length;
                var newitem = '<div class="d-flex flex-row address-row">' +
                              '    <div class="form-group col-md-4 pl-0 mt-1 mb-1">' +
                              '        <input id="ConnectAddresses_' + num + '_" name="ConnectAddresses[' + num + ']" class="form-control address">' +
                              '    </div>' +
                              '    <div class="form-group col-md-4 pl-0 mt-1 mb-1">' +
                              '        <input id="Urls_' + num + '_" name="Urls[' + num + ']" class="form-control url" readonly>' +
                              '    </div>' +
                              '    <div class="col-auto align-self-center">' +
                              '        <button type="button" class="btn btn-outline-danger btn-sm xbutton remove-connectaddress-button"><span data-feather="x"></span></button>' +
                              '    </div>' +
                              '</div>';
                $(this).before(newitem);
                feather.replace();
                $(this).prev().find("button").click(removeAddress);
                $(".address").change(setUrl);
            }

            var removeAddress = function () {
                var row = $(this).parent().parent();
                var num = row.find("input").attr("id").replace("ConnectAddresses_", "").replace("_", "");
                $(".address-row").each(function()
                {
                    var currNum = $(this).find("input").attr("id").replace("ConnectAddresses_", "").replace("_", "");
                    if (parseInt(currNum) > parseInt(num)) {
                        $(this).find("input.address").attr("id", "ConnectAddresses_" + (parseInt(currNum) - 1) + "_");
                        $(this).find("input.address").attr("name", "ConnectAddresses[" + (parseInt(currNum) - 1) + "]");
                        $(this).find("input.url").attr("id", "Urls_" + (parseInt(currNum) - 1) + "_");
                        $(this).find("input.url").attr("name", "Urls[" + (parseInt(currNum) - 1) + "]");
                    }
                });
                row.remove();
            }

            $('#submit-listener-button').click(function () {
                var filecontrol = $("input.form-control-file")[0];
                var file = filecontrol.files[0];
                if (file == undefined)
                {
                    $("#submit-listener-form").submit();
                }
                else
                {
                    var fr = new FileReader();
                    fr.onload = receivedFileBuffer;
                    fr.readAsDataURL(file);
                }
                function receivedFileBuffer() {
                    $("input.file-filler").val(fr.result.split(",").pop()).prop("disabled", false);
                    $("input.form-control-file").prop("disabled", true);
                    $("#submit-listener-form").submit();
                }
            });
            var useSSL = "False";
            function swapOptions() {
                useSSL = $("#UseSSL").children("option:selected").text();
                if (useSSL.includes("False"))
                {
                    $(".cert-div").attr("hidden", "true");
                }
                else if (useSSL.includes("True"))
                {
                    $(".cert-div").removeAttr("hidden");
                }
                setUrl();
            };
            function setUrl() {
                var connectPort = $("#ConnectPort").val();
                var protocol = "http://";
                if (useSSL.includes("True"))
                {
                    protocol = "https://"
                }
                $(".address").each(function() {
                    var connectaddress = $(this).val();
                    $($(this).parent().next().children("input")[0]).val(protocol + connectaddress + ":" + connectPort);
                });
            }

            $("#UseSSL").change(swapOptions);
            $(".address").change(setUrl);
            $("#ConnectPort").change(setUrl);

            $('#add-connectaddress-button').click(addAddress);
            $('.remove-connectaddress-button').click(removeAddress);

            $("#http-tab").tab('show');
            
            swapOptions();
            setUrl();
        });
    </script>
}
